<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>改进axios框架</title>
    <style>
        form .respinfo {
            border-width: 0;
            color: red;
        }
    </style>
    <script th:src="@{/script/vue.js}"></script>
    <script th:src="@{/script/axios.min.js}"></script>
</head>
<body>
<div id="app">
    <h1>{{message}}</h1>
    <form th:action="@{/ajax/checkUser}" method="post">
        用户名: <input type="text" name="username" v-model="person.username" @blur="verify()">
        <button type="button" @click="verify()">验证用户名</button>
        <input class="respinfo" type="text" id="myres"><br><br>
        密 码: <input type="password" name="pwd"><br><br>
        邮 件: <input type="text" name="email"><br><br>
        <button type="submit">用户注册</button>
    </form>
</div>

<h3>返回json数据2</h3>
<div id="div02"></div>

<h3>返回json数据3</h3>
<div id="div03"></div>

<h3>返回json数据4</h3>
<div id="div04"></div>
</body>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            message:"改进axios框架",
            person:{
                username:""
            },
            respdata:""
        },
        methods: {
            axiosGet(url,params) {
                return axios({
                    method:"get",
                    url:url,
                    params:params
                });
            },
            axiosPost(url,params) {
                return axios({
                    method:"post",
                    url:url,
                    params:params
                });
            },
            verify() {
                this.axiosPost("checkUser", {
                    "username":this.person.username
                }).then((response) => {
                    console.log("axios第一次发送ajax请求");
                    console.log(response);
                    var div02 = document.getElementById("div02");
                    div02.innerHTML = response.data;

                    return this.axiosPost("checkUser", {
                        "username":"李四"
                    })
                }).then((response) => {
                    console.log("axios第二次发送ajax请求");
                    console.log(response.data);
                    var div03 = document.getElementById("div03");
                    div03.innerHTML = response.data;

                    return this.axiosPost("checkUser", {
                        "username":"王五"
                    })
                }).then((response) => {
                    console.log(response.data);
                    var div04 = document.getElementById("div04");
                    div04.innerHTML = response.data;
                }).catch((error) => {
                    console.log("error = ", error);
                })
            }
        }
    });

</script>
</html>